<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div>
        <h1>The Ajax 03 Page</h1>
        <fieldset>
            <legend>Ajax 表单请求</legend>
            <form>
                <input type="text" name="name" id="nameId" value="" class="mingzi" onblur="doCheck()">
                <button type="button" onclick="doSave()">Save</button>
            </form>
            <span id="result">1</span>
        </fieldset>
    </div>
    <script>
        function doAjaxGet(){

        }
        function doAjaxPost(url,params,callback){//封装共性（不变的），提取特性（可能会经常变化的）
            //发送异步请求，检查name是否存在
            //1.创建xhr对象（Ajax技术应用的入口）
            let xhr=new XMLHttpRequest();
            //2.设置状态监听（不是必须的，假如要获取服务端响应的结果并进行处理就要进行状态监听）
            xhr.onreadystatechange=function (){
                if (xhr.readyState==4&&xhr.status==200) {
                    callback(xhr.responseText);//处理响应数据
                }
            }
            //3.建立Get连接(get请求传参数，要将参数拼接到url中)
            //字符串``和${}表示拼接字符串
            xhr.open("POST",url,true);
            //post请求假如需要向服务端传递参数，则必须在open之后设置请求头
            xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
            //4.发送异步post请求（参数需要写到send方法内部）-表单数据或数据量比较大时
            xhr.send(params);
        }
        function doAjaxGet(url,params,callback){//发送异步请求，检查name是否存在
            //1.创建xhr对象（Ajax技术应用的入口）
            let xhr=new XMLHttpRequest();
            //2.设置状态监听（不是必须的，假如要获取服务端响应的结果并进行处理就要进行状态监听）
            xhr.onreadystatechange=function (){
                if (xhr.readyState==4&&xhr.status==200) {
                    callback(xhr.responseText);
                }
            }
            //3.建立Get连接(get请求传参数，要将参数拼接到url中)
            //var name=document.forms[0].name.value;
            //xhr.open("GET","http://localhost/doCheck?name="+name,true);
            //let name=document.querySelector("#nameId").value;基于节点id获取
            // let name=document.getElementById("nameId").value;基于id选择器
            //let name=document.querySelector(".mingzi").value;基于class选择器
            //let name=document.querySelector("input").value;多个对象取第一个vlaue属性的值
            xhr.open("GET",`${url}?${params}`,true);
            //4.发送异步请求
            xhr.send(null);
        }
        function doSave(){//发送异步请求，检查name是否存
            //1.定义请求url
            let url="http://localhost/doSave";
            //2.定义请求参数
            let name=document.forms[0].name.value;
            let params=`name=${name}`;
            //3.发送异步请求并处理响应结果
            doAjaxPost(url,params,function (result){
                document.getElementById("result").innerHTML=result;
            })

        }

        function doCheck(){//发送异步请求，检查name是否存
            //1.定义请求url
            let url="http://localhost/doCheck";
            //2.定义请求参数
            let name=document.forms[0].name.value;
            //3.发送异步请求并处理响应结果
            doAjaxGet(url,`name=${name}`,function (result){
                document.getElementById("result").innerHTML=result;
            })
        }
    </script>
</body>
</html>